<template>
    <div class="announcment_vue">
        <el-row>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <span class="notic-text">通知公告</span>
                </div>
            </el-col>
            
        </el-row>
        <el-row :gutter="18">
            <el-col :span="12">
                <div class="grid-content bg-purple-dark" style="width: 100%;">
                    <el-card class="box-card" v-for="(announcement, index) in announcements.slice(0,Math.ceil(announcements.length/2))" :key="index"
                        :timestamp="announcement.textCreatetime" 
                        
                        shadow="hover">
                        <div class="text item" style="text-align:left">
                            <div style="gap: 20px;">
                                <i class="el-icon-date">{{ formattedTime(announcement.textCreatetime) }}</i>
                                <el-button type="text" @click="opencard(announcement)">{{ truncatedTitle(announcement.textTitle) }}</el-button>
                                
                                
                            </div>
                        </div>
                    </el-card>  
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-dark" style="width: 100%;">
                    <el-card class="box-card" v-for="(announcement, index) in announcements.slice(Math.ceil(announcements.length/2))" :key="index"
                        :timestamp="announcement.textCreatetime" 
                        shadow="hover">
                        <div class="text item" style="text-align:left">
                            <div style="gap: 20px;">
                                <i class="el-icon-date">{{ formattedTime(announcement.textCreatetime) }}</i>
                                <el-button type="text" @click="opencard(announcement)">{{ truncatedTitle(announcement.textTitle) }}</el-button>
            
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-dialog title="查看" 
            :before-close="close" 
            :visible.sync="TextVisible" 
            lock-scroll="false"
            :fullscreen="true">
                <vue-office-docx :src="texturl" @rendered="rendered" v-if="suffix ==='docx' " />
                <vue-office-pdf :src="texturl" @rendered="renderedHandler" @error="errorHandler" v-if="suffix==='pdf' " />
            
                
                <div slot="footer" class="dialog-footer">
                    <el-link  :underline="false" :href="texturl">下载文件</el-link>
                    <el-button @click="cancel">关闭</el-button>
                    
                </div>
            </el-dialog>
        </el-row>
    </div>
    
</template>

<script>
    import { Timeline, TimelineItem } from 'element-ui';
    import VueOfficeDocx from '@vue-office/docx'
    //引入相关样式
    import '@vue-office/docx/lib/index.css'
    import VueOfficePdf from '@vue-office/pdf'
    export default {
        components: {
            Timeline,
            TimelineItem,
             VueOfficeDocx,
            VueOfficePdf
        },
        data() {
            return {
                announcements: [
                    { textId: NaN, textTitle: '', textUrl:'',textCreatetime:'' },
                    
                ],
                texturl:'',
                suffix: '',
                TextVisible: false,
                 maxTitleLength: 15, // 设置最大标题长度
            };
        },
        methods: {
            // 如果需要实时更新公告，这里可以添加获取公告数据的方法
            fetchAnnouncements() {
                // 假设是从API获取数据
                // this.announcements = await fetchAnnouncementsFromAPI();
                 this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/textinfo/all",
                    
                }).then(res => {
                    if (res.data.data.length != 0) {
                        this.announcements = res.data.data;
                        
                    }
                })
            },
             cancel() {
                this.suffix=null;
                this.texturl = null;
                this.TextVisible = false;

            },
            close(){
                this.suffix = null;
                this.texturl = null;
                this.TextVisible = false;
            },
            opencard(announcement){
                this.TextVisible = true;
                this.texturl = announcement.textUrl;
                this.suffix = announcement.textUrl.split('.').pop();
            },
             formattedTime(timestamp) {
                const date = new Date(timestamp);
                return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
            },
            truncatedTitle(announcementTitle) {
                return announcementTitle.length > this.maxTitleLength
                    ? `${announcementTitle.slice(0, this.maxTitleLength)}...`
                    : announcementTitle;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
        },
        created() {
            // 在组件创建时获取最新公告数据
            this.fetchAnnouncements();
        }
    };
</script>
<style scoped>
    .box-card{
        height: auto;
        width: 100%;
        margin-left: 20px;
        margin-top: 10px;
    }
    .notice-text {
        font-family: 'SimHei', 'Microsoft Yahei', sans-serif; /* 设置字体为黑体 */
        font-size: 18px; /* 字号大小根据需求调整 */
        color: blue; /* 文字颜色设为蓝色 */
        line-height: 1.5; /* 行高可以根据实际情况调整，保持良好的阅读体验 */
    }
    .el-col {
        background-color: #ffffff00;
        
        
        line-height: 60px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>